<template>

                <div class="wen">
                    <div class="du">
                        <h1> {{ data.tem }} <span class="iconfont icon-centigrade"></span></h1>

                        <p>{{ data.tem2 }}~{{ data.tem1 }}</p>
                        <p style="color: yellow;"><i class="icon-taiyang iconfont"></i>高温预警</p>
                    </div>

                    <div class="tab">
                        <ul>
                            <li><i class="icon-tiganwendu iconfont">体感</i>
                                <p>   {{ data.tem }}<span class="iconfont icon-centigrade"></span></p>
                          
                            </li>
                            <li><i class="icon-fengli iconfont">风力</i> <span>{{ data.win_speed }}</span></li>
                            <li><i class="icon-shidu iconfont">湿度</i> <span>{{ data.humidity }}</span></li>
                        </ul>
                    </div>

                    <div class="day">

                        <div class="a">
                            <div class="jin">
                                <p> {{ data.tem2 }}~{{ data.tem1 }} <span class="iconfont icon-centigrade"></span></p>
                                <p class="icon-yueliang iconfont" style="color: yellow;"></p>
                            </div>
                            <div class="jj">
                                <p>今天</p>
                                <p class="t"></p>
                                <p>晴</p>
                            </div>
                        </div>
                        <div class="a">
                            <div class="jin">
                                <p> {{ data1.tem2 }}~{{ data1.tem1 }}<span class="iconfont icon-centigrade"></span></p>
                                <p class="icon-taiyang iconfont" style="color: yellow;"></p>
                            </div>
                            <div class="jj">
                                <p>明天</p>
                                <p class="t"></p>
                                <p>晴</p>
                            </div>
                        </div>
                    </div>

                </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getweather} from '../../request/index'


const data=ref({})
const data1=ref({})
// onMounted(()=>{

//     getweather({
//         unescape:1,
//         version:'v9',
//         appid:'57124231',
//         appsecret:'h9PCfAXh'
//     }).then(res=>{
//         console.log('天气',res.data.data[0]);
//         data.value=res.data.data[0]
//         data1.value=res.data.data[1]
//     })

// })

console.log(data);

</script>

<style scoped lang="scss">

        

            .wen {
                height: 80%;
                width: 90%;
                border: 1px solid #081673;
                color: white;
              
                margin: 10px 18px;
                background-color: #0c1d5f;

                .du {
                   
                    height: 30px;
                    line-height: 30px;
                    width: 80%;
                    margin: auto;
                    display: flex;
                    justify-content: space-around;
                       .icon-centigrade{
                    font-size: 30px;
                }
                }
             
                .tab {
                    border: 1px solid #081673;
                    height: 140px;
                    line-height: 100px;
                    width: 80%;
                    margin: auto;
                    background-color: #172e6e;
                    margin-bottom: 5px;

                    ul {
                        padding: 2px;
                        margin: 15px;

                        li {
                            border-bottom: 1px solid #3042a9;
                            display: flex;
                            justify-content: space-between;
                            margin-top: 15px;
                            height: 20px;
                            list-style: none;
                            line-height: 20px;
                        }

                    }
                }

                .day {

                    width: 80%;
                    margin: auto;
                
                    background-color: #172e6e;
                    display: flex;

                    .a {
                        border-right: 1px solid #3042a9;
                        flex: 1;

                        .jin {
                            display: flex;
                            justify-content: space-around;
                            font-size: 13px;
                        }

                        .jj {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                        }

                    }


                    .t {
                        width: 20px;
                        height: 10px;
                        background-color: #07a93c;
                        border-radius: 20%;
                        border: none;
                        display: block;
                    }


                }
            }
</style>